html, body {
	font-family: Arial;
}

h1 {
	-webkit-transform: translateZ(0);
}

.controls {
	margin: 30px 0;
}

.block {
	width: 500px;
	height: 350px;
	margin: 20px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	border: 1px solid #CCC;
	padding: 15px;
	background: #EEE;
	position: relative;
	float: left;
	transition: all 0.3s ease-out;
	-webkit-transform: translateZ(0);
	cursor: pointer;
}

.block h1 {
	transition: all 0.3s ease-out;
	font-size: 18px;
	color: #666;
	margin: 0 0 0.5em 0;
}

.block .container {
	width: 100%;
	height: 160px;
	background: black;
	margin: 0 0 10px 0;
	overflow: hidden;
	border: 1px solid #CCC;
}

.block .container img {
	transition: all 0.3s ease-out;
	margin-top: -65px;
	width: 502px;
	-webkit-transform: translate(0, 0);
}

.block p {
	transition: all 0.3s ease-out;
	color: #888;
	line-height: 140%;
	font-size: 13px;
	margin: 0 0 1em 0;
	width: 80%;
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

.hover .block:hover {
	border-radius: 8px;
	background: #FFF;
	border: 1px solid #BBB;
	box-shadow: 0 3px 10px rgba(0,0,0,0.4);
	-webkit-transform: translate(0, -4px);
}

.hover .block:hover .container img {
	width: 522px;
	-webkit-transform: translate(0, -5px);
}

.hover .block:hover h1 {
	color: #222;
}

.hover .block:hover p {
	color: #222;
	text-shadow: none;
}
